<template>
	<div class="app-container">
		<el-row class='content-container'>
			<div class="left">
				<company @choseCompany="choseCompany"></company>
			</div>
			<div class="left">
				<span class="label-titile">课程名字</span>
				<el-input v-model="reqData.courseName" placeholder="请输入课程名字" style="width:200px" @keyup.enter.native="search"></el-input>
				<el-button type="primary" @click="search">搜索</el-button>
			</div>
		</el-row>
		<el-table
        :data="courseArray"
        style="width: 100%">
      
         <el-table-column
	        prop="courseName"
	        width="400"
	        label="学习课程">
	      </el-table-column>
		   <el-table-column
	        label="观看进度">
	         <template slot-scope="scope">
	        	  <el-progress :percentage="parseInt(scope.row.finishChapterNum/scope.row.chapterNum*100)"></el-progress>
	      	</template>
	      </el-table-column>
		   <el-table-column
	        prop="score"
	        label="考试分数">
	      </el-table-column>
	       <el-table-column
	        prop="certificateStatus"
	        label="证书">
	        <template slot-scope="scope">
	        	<span>{{ scope.row.certificateStatus?'已获得':'未获得'}}</span>
	        </template>
	      </el-table-column>
        
  </el-table>
		<el-row>
			<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalResultSize" :current-page="reqData.currentPage" :page-count="totalPageSize" :page-sizes="[10, 20, 30, 50]" :page-size="reqData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	import {getComanyId} from '@/utils/auth'
	import company from '../../components/common/company'
	import { getStudyStatisticsByCourse } from '@/api/statistics'
	export default {
		name: 'studyDimension',
		components: { company},
		data() {
			return{
				 courseArray: [],
				 reqData: {
					pageSize:10,
					currentPage: 1,
                    companyName:"",
                    courseName:"",
                    companyId:"",
                    userId:""
					
				},
				totalPageSize: 0,
				totalResultSize: 0,
			}
		},
		created() {
            let query = this.$route.query;
            this.reqData.userId = query.userId;
			this.reqData.companyId = getComanyId();
			this.getCourseStatisticsList(this.reqData);
		},
		methods: {
			getCourseStatisticsList(data) {
				getStudyStatisticsByCourse(data).then((res) => {
					let entity = res.entity;
                    this.courseArray = [...entity.data]
					this.totalPageSize = entity.page.totalPageSize;
					this.totalResultSize = entity.page.totalResultSize;
					
				})
			},
			search(){
				this.reqData.currentPage = 1;
				this.getCourseStatisticsList(this.reqData);	
			},
			choseCompany(data){
				this.reqData.companyId = data;
			},
			handleSizeChange(val) {
				this.reqData["pageSize"] = val;
			 	this.reqData.currentPage = 1;
			 	this.getCourseStatisticsList(this.reqData);
			},
			handleCurrentChange(val){
				this.reqData.currentPage = val; 
		    	this.getCourseStatisticsList(this.reqData);	
            },
           

		}
	}
</script>

<style>

</style>